<template>
  <view>
    <view class="fixedPop safe-area-inset-bottom">
      <view class="item">
        <image
          class="handImg"
          :src="data.user_avatar"
          @click.stop="gotoUserInfo"
        ></image>

        <view class="add" @click.stop="$emit('follow')" v-if="showFollow">
          <i class="iconfont icon-add-select"></i>
        </view>
      </view>

      <view
        class="item"
        @click.stop="changeStatus('is_like', '1', 'like_count')"
      >
        <view class="icons">
          <i class="iconfont icon-good" v-if="data.is_like === 0"></i>
          <i class="iconfont icon-good-fill" v-else></i>
        </view>
        <view class="num">{{ data.like_count }}</view>
      </view>

      <view class="item" @click.stop="$emit('openPop', 1)">
        <view class="icons">
          <i class="iconfont icon-comments"></i>
        </view>
        <view class="num">{{ data.comment_count }}</view>
      </view>

      <view
        class="item"
        @click.stop="changeStatus('is_collect', '2', 'collect_count')"
      >
        <view class="icons">
          <i class="iconfont icon-collection" v-if="data.is_collect === 0"></i>
          <i class="iconfont icon-collection-fill" v-else></i>
        </view>
        <view class="num">{{ data.collect_count }}</view>
      </view>

      <view class="item" @click.stop="changeStatus('trans_count', '3')">
        <view class="icons">
          <i class="iconfont icon-resonserate"></i>
        </view>
        <view class="num">{{ data.trans_count }}</view>
      </view>

      <view
        class="item"
        @click.stop="$emit('openPop', 2)"
        v-if="getGoodsList.length"
      >
        <view class="goods">
          <i class="iconfont icon-Newuserzone"></i>

          <view class="leng">{{ getGoodsList.length }}</view>
        </view>
      </view>
    </view>

    <view class="videoInfo" v-if="data" @click.stop="$emit('openPop', 1)">
      <view class="videoInfoHd">
        <view class="videoName">@{{ data.user_name }}</view>
        <view class="videoContent">{{ data.content }}</view>

        <view
          class="videoGoods"
          v-if="getGoodsList.length"
          @click.stop="
            $utils.toUrl(
              `/goods/goods/goods?id=${getGoodsList[0].id}&video_id=${videoId}`,
              'navigate'
            )
          "
        >
          <view class="img">
            <image mode="aspectFill" :src="getGoodsList[0].cover_pic"> </image>
          </view>
          <view class="txt"> {{ getGoodsList[0].name }} </view>
        </view>
      </view>

      <view class="videoInfoInput" @click.stop="openText">
        <i class="iconfont icon-bianji"></i>
        <input
          type="text"
          disabled
          :placeholder="$t('videoGoods.detail.footerText')"
        />
      </view>

      <u-popup
        mode="bottom"
        v-model="showInputPop"
        :z-index="121"
        safe-area-inset-bottom
        @open="showInput = true"
        @close="showInput = false"
      >
        <view class="popBox" @click.stop="stopFn">
          <input
            v-model="content"
            ref="value"
            :placeholder="$t('videoGoods.detail.footerText')"
            :focus="showInput"
            @confirm="confirm"
          />
        </view>
      </u-popup>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default() {
        return null;
      },
    },

    userId: {
      type: [Number, String],
      default: undefined,
    },
    videoId: {
      type: [Number, String],
      default: undefined,
    }
  },

  data() {
    return {
      showInputPop: false,
      content: "",
      showInput: false,
    };
  },

  computed: {
    getGoodsList() {
      let { data } = this;
      if (!data) {
        return 0;
      }

      return data.goods_list ? data.goods_list : data.goods.list || [];
    },

    showFollow() {
      let { userId, data } = this;

      if (
        data &&
        String(data.user_id) !== userId &&
        String(data.is_focus) === "0"
      ) {
        return true;
      }
      return false;
    },
  },

  methods: {
    stopFn() {
      return false;
    },

    changeStatus(type, status, numEl) {
      this.$emit("changeStatus", type, status, numEl);
    },

    gotoUserInfo() {
      this.$utils.toUrl(
        `/videoGoods/userInfo/index?id=${this.data.user_id}`,
        "navigate"
      );
    },

    openText() {
      this.showInputPop = true;
    },

    confirm() {
      this.$emit("confirm", this.content);
      this.showInput = false;
      this.showInputPop = false;
      this.content = "";
    },
  },
};
</script>

<style scoped lang="less">
.fixedPop {
  position: absolute;
  right: 28rpx;
  z-index: 9;
  bottom: calc(env(safe-area-inset-bottom) + 124rpx);
  color: #fff;

  .item {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 50rpx;
    width: 100rpx;
  }

  .handImg {
    border: 4rpx solid rgba(255, 255, 255, 0.6);
    border-radius: 32px;
    width: 96rpx;
    height: 96rpx;
    background: #fff;
  }

  .add {
    position: absolute;
    left: 50%;
    top: 72rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -20rpx;
    width: 40rpx;
    height: 40rpx;
    border-radius: 32px;
    background: #f0250e;

    .iconfont {
      font-size: 20rpx;
    }
  }

  .icons {
    .iconfont {
      font-size: 70rpx;

      &.icon-good-fill {
        color: #f0250e;
      }

      &.icon-collection-fill {
        color: #fbb954;
      }
    }
  }

  .num {
    font-size: 24rpx;
  }

  .goods {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 74rpx;
    height: 74rpx;
    border-radius: 32px;
    background: linear-gradient(180deg, #f8745e 0%, #f83939 100%);

    .iconfont {
      font-size: 60rpx;
    }

    .leng {
      position: absolute;
      right: 0%;
      top: -20%;
      width: 38rpx;
      height: 34rpx;
      text-align: center;
      line-height: 34rpx;
      border-radius: 12px 12px 12px 0;
      background: #fff;
      font-size: 20rpx;
      color: #f0250e;
    }
  }
}

.videoInfo {
  position: fixed;
  left: 0;
  right: 0;
  bottom: env(safe-area-inset-bottom);
  z-index: 6;
  color: #fff;
}

.videoInfoHd {
  padding: 0 164rpx 30rpx 30rpx;
  overflow: hidden;
}

.videoName {
  font-size: 34rpx;
}

.videoContent {
  line-height: 48rpx;
  max-height: 144rpx;
  display: -webkit-box;
  white-space: normal;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  word-break: break-all;
  overflow: hidden;
}

.videoInfoInput {
  display: flex;
  align-items: center;
  padding: 0 32rpx;
  border-top: 1px solid rgba(255, 255, 255, 0.1);

  input {
    flex: 1;
    overflow: hidden;
    font-size: 30rpx;
    color: #fff;
    height: 100rpx;
  }

  .iconfont {
    font-size: 36rpx;
    margin-right: 24rpx;
    color: rgba(255, 255, 255, 0.5);
  }
}

.videoGoods {
  display: flex;
  align-items: center;
  margin-top: 10rpx;
  padding: 14rpx 20rpx;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8rpx;
  overflow: hidden;

  .img {
    margin-right: 14rpx;

    image {
      width: 56rpx;
      height: 56rpx;
      border-radius: 8rpx;
      background: #fff;
    }
  }

  .txt {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.popBox {
  input {
    padding: 0 20rpx;
    background: #f2f2f2;
    font-size: 24rpx;
    height: 100rpx;
    color: #333;
  }
}
</style>
